<template>
  <div class="dialog-container">
    <el-dialog
      v-dialogDrag
      title="数据权限信息"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="60%"
      append-to-body
      @open="onOpen"
      @opened="onOpened"
      @close="onClose"
      @closed="onClosed"
    >
      <div class="app-container" style="padding: 10px 0px 0px 0px;">
        <div class="search-container">
          <el-form ref="conditionForm" :model="searchForm" label-position="top">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="字段">
                  <el-input v-model="searchForm.field" size="mini" placeholder="字段" clearable />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="table-container">
          <el-row style="margin-bottom: 10px;">
            <el-button icon="el-icon-search" type="primary" size="mini" @click="onSearch">查询</el-button>
            <el-button icon="el-icon-close" type="danger" size="mini" @click="onClear">清空</el-button>
            <el-button icon="el-icon-plus" type="success" size="mini" @click="onAdd">新增</el-button>
          </el-row>
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            :height="400"
            :stripe="true"
          >
            <el-table-column type="index" width="50" label="序号" align="center" />
            <el-table-column label="字段" prop="field" show-overflow-tooltip />
            <el-table-column label="类型" prop="type" width="100" />
            <el-table-column label="选项编码" prop="optionCode" width="100" />
            <el-table-column label="自定义" prop="customBean" width="100" />
            <el-table-column label="字段值" prop="fieldValue" width="100" />
            <el-table-column label="条件类型" prop="conditionType" width="100" />
            <el-table-column label="备注" prop="remark" width="100" />
            <el-table-column fixed="right" label="操作" width="130">
              <template slot-scope="scope">
                <el-button size="mini" @click.stop="edit(scope.row)">修改</el-button>
                <el-button size="mini" @click.stop="deletes(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="pageVo.currentPage"
            :page-sizes="[30, 50, 100, 500]"
            :page-size="pageVo.pageSize"
            :total="pageVo.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
      </div>
      <ResourceDataScopeEditor ref="ResourceDataScopeEditor" :row-data="fieldRowData" :type="fieldEditorType" />
    </el-dialog>
  </div>
</template>
<script>
import ResourceDataScopeEditor from './resourceDataScopeEditor.vue'
export default {
  components: {
    ResourceDataScopeEditor
  },
  props: {
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // ----------------------弹框部分-------------------------
      pageLoading: false,
      dialogFormVisible: false,
      searchForm: {
        field: ''
      },
      listLoading: false,
      formLoading: false,
      multipleSelection: [],
      calcTableHeight: '500px',
      pageVo: {
        total: 0,
        status: true,
        pageSize: 30,
        currentPage: 1
      },
      list: [],
      fieldRowData: {},
      fieldEditorType: '',
      editorForm: {
        id: null,
        code: '',
        type: '',
        intensifyName: '',
        classType: '',
        classPath: ''
      }
    }
  },
  created() {},
  mounted() {
  },
  methods: {
    onOpen() {
      this.pageLoading = true
    },
    onOpened() {
      this.getData()
      this.pageLoading = false
    },
    onClose() {},
    onClosed() {
      this.$parent.detailRowData = {}
      this.list = []
      this.searchForm.code = ''
    },
    // 查询按钮
    onSearch() {
      this.handleCurrentChange(1)
    },
    // 清空按钮
    onClear() {
      this.searchForm.code = ''
    },
    // 新增
    onAdd(data) {
      this.fieldRowData = this.rowData
      this.fieldEditorType = 'add'
      this.$refs.ResourceDataScopeEditor.dialogFormVisible = true
    },
    edit(row) {
      this.fieldRowData = row
      this.fieldEditorType = 'edit'
      this.$refs.ResourceDataScopeEditor.dialogFormVisible = true
    },
    // 删除
    deletes(row) {
      this.$confirm('删除, 是否继续?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          var params = {
            id: row.id
          }
          this.$store.dispatch('system/resourceField/dataScopeRemove', params).then((data) => {
            this.$message({ message: '删除成功', type: 'success' })
            this.onSearch()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 获取数据
    getData() {
      this.listLoading = true
      const params = {
        ...this.searchForm,
        resourceApplicationId: this.rowData.resourceApplicationId,
        resourceApiId: this.rowData.resourceApiId,
        resourceDetailId: this.rowData.id,
        pageNum: this.pageVo.currentPage,
        pageSize: this.pageVo.pageSize
      }
      this.$store.dispatch('system/resourceField/dataScopePage', params).then((data) => {
        var records = data.records
        this.list = records
        this.pageVo.total = data.total
        this.listLoading = false
      })
    },
    dateFormat(date) {
      if (date === undefined) {
        return ''
      }
      return this.$Utils.formatDate(new Date(date))
    },
    // 页码改变事件
    handleCurrentChange(val) {
      this.pageVo.currentPage = val
      this.getData()
    },
    // 页数改变事件
    handleSizeChange(val) {
      this.pageVo.pageSize = val
      this.pageVo.currentPage = 1
      this.getData()
    },
    // 多选框触发事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
